<template>
    <div :class="{'p-meetingcenter':true}">
        <link rel="stylesheet" href="//at.alicdn.com/t/font_886621_v2obqnahgf.css">
        <header class="m-header-meetingcenter">
            <div :class="{'m-search':true,'z-crt':isSearchPannelStyle}">
                <div class="m-pannel">
                    <router-link to="/home/search" :class="{'u-searchbtn':true,'z-sel':isSearchStyle}" @click="blink">
                        <van-icon class="icon-search" name="search" size='16px'/>
                    </router-link>
                </div>
                <svg class="fillterSwitch" viewBox="0 0 1024 1024" version="1.1" @click="SwitchInFillter"><path d="M65 69.167l894 0 0 30-894 0 0-30ZM65 353.396l894 0 0 30-894 0 0-30ZM414.008 635.845 65 635.845l0 30 344.673 0C410.606 655.709 412.036 645.689 414.008 635.845zM65 924.992l0 30 478.414 0c-13.848-8.906-26.763-19.043-38.866-30L65 924.992zM916.251 692.819c0.016-114.731-92.995-207.726-207.741-207.726-114.714 0-207.725 92.994-207.725 207.726 0 114.73 92.995 207.755 207.725 207.755 51.813 0 99.032-19.177 135.413-50.547l93.281 93.266L959 921.498l-93.28-93.267C897.119 791.834 916.251 744.66 916.251 692.819zM838.188 813.119l-4.516 4.847-4.862 4.517c-32.829 30.465-75.564 47.264-120.301 47.264-97.54 0-176.896-79.356-176.896-176.927 0-97.54 79.356-176.897 176.912-176.897 0.015 0 0.045 0 0.061 0 47.22 0 91.625 18.424 125.042 51.811 33.4 33.417 51.795 77.821 51.78 125.087C885.423 737.555 868.655 780.274 838.188 813.119z" /></svg>
            </div>
        </header>
        <main>
            <div class="m-swiper-pannel">
                <van-swipe class="v-myswiper" :autoplay="time" :show-indicators='false' @change="onChange" ref="myswipe">
                    <van-swipe-item :key="guide.key" v-for="guide in swipersData">
                        <div class="g-mnc-swiper">
                            <img class="u-logo" :src="guide.logo" alt="logo">
                            <div class='title'>
                                <p>{{guide.title | formatTitle}}</p>
                            </div>
                            <div class="show-content">
                                <router-link :to="{path:'/officer',query:{ id:guide.id }}"><img class="formatimg" v-lazy="guide.small_image" alt="请稍后"></router-link>
                            </div>
                        </div>
                    </van-swipe-item>
                </van-swipe>
            </div>

            <div class="swiper-guide">
                <div class="m_embellish"><img src="@/common/image/news_logo.png" alt=""></div>
                <van-swipe class="m_newlist" :autoplay="time" vertical :show-indicators='false'>
                    <van-swipe-item v-for="item in newlist" :key='item.key'>
                        <router-link class="u_newlist" :to="{name:'aca',params:{programa:item.type}}">
                            <h3 class="u_new-title">{{item.type_text}}</h3>
                            <div class="content">
                                <p>{{item.description1}}</p>
                                <p>{{item.description2}}</p>
                            </div>
                        </router-link>
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div class="m-list" >
                <mt-spinner type="snake" v-show="loadinglist"></mt-spinner>
                <ul
                        v-infinite-scroll="loadMore"
                        infinite-scroll-disabled="loading"
                        infinite-scroll-distance="20" v-show="!loadinglist">
                    <li v-for="listItem in MeetingData" :key="listItem.listId">
                        <div class="list-item">
                            <div class="context">
                                <router-link class="meetinglist_title" :to="{path:'/officer',query:{ id:listItem.mid,title:listItem.title}}">{{listItem.title}}</router-link>
                                <div class="msg">
                                    <div><svg class="icon" size="12" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 16C238.064 16 16 238.08 16 512c0 273.936 222.064 496 496 496 273.952 0 496-222.048 496-496C1008 238.08 785.952 16 512 16zM512 946.976C272.688 946.976 78 751.312 78 512 78 272.688 272.688 78 512 78S946 272.688 946 512C946 751.312 751.312 946.976 512 946.976zM543.008 499.424 543.008 202c0-17.12-13.872-31.008-31.008-31.008s-31.008 13.872-31.008 31.008L480.992 512c0 8.768 3.664 16.64 9.52 22.288 0.528 0.608 0.944 1.28 1.52 1.856l153.44 153.44c12.112 12.112 31.744 12.112 43.84 0s12.112-31.728 0-43.84L543.008 499.424z" /></svg><span>{{listItem.start_time}}</span></div>
                                    <div><svg class="icon" size="12" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M511.949885 191.974901c-89.175725 0-161.745087 72.168672-161.745087 160.899187 0 88.685993 72.569362 160.765623 161.745087 160.765623s161.656045-72.07963 161.656045-160.765623c0-88.730514-72.48032-160.899187-161.656045-160.899187z m0 250.431081A89.79902 89.79902 0 0 1 422.061822 352.829567a89.843541 89.843541 0 0 1 179.731604 0c0 49.4184-40.336099 89.576415-89.843541 89.576415zM890.423594 376.737387C890.423594 169.002023 720.620191 0 511.949885 0 303.279578 0 133.565217 169.002023 133.565217 376.737387c0 162.902635 233.023338 491.201087 333.240292 624.76433a56.541773 56.541773 0 0 0 90.288752 0C657.311214 867.938474 890.423594 539.684544 890.423594 376.737387zM517.91571 944.470212l-5.965825 8.058316-5.965825-8.058316c-189.214594-254.794147-306.883811-472.368669-306.883811-567.732825 0-171.717809 140.330447-311.424962 312.849636-311.424961 172.474668 0 312.760594 139.707152 312.760594 311.424961 0.044521 95.408677-117.491133 312.938678-306.794769 567.732825z" /></svg><span>{{listItem.city}}</span></div>
                                </div>
                            </div>
                            <div class="pic">
                                <img v-lazy='listItem.small_image' :alt="listItem.title">
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="u-wrap-icon" v-if="MeetingData.length>3 ? true : false" v-show="!loadinglist">
                    <van-loading class="icon" type="spinner" color="black" v-if="!isloadEnd"/>
                    <p v-else>已经全部加载完</p>
                </div>
            </div>
            <transition name="fade">
                <div class="g-sidebarback" @click="SwitchInFillter" v-if="switchFillter"></div>
            </transition>
            <keep-alive>
                <sidebar @closeFillter='fillterSearch' v-if="switchFillter"></sidebar>
            </keep-alive>
            <transition :name="slide"><router-view>·</router-view></transition>
        </main>
    </div>
</template>

<style lang="scss" scoped src='./index.scss'></style>



<script>
    import Axios from "axios";
    import { GetIndexBanner, GetSearch, GetFillter, GetMeetingList, RequestGet } from '@/api/http.js'
    import Sidebar from '@/components/sidebar'
    import isSearch from '@/components/search'
    export default {
        created(){
            // let mp = JSON.parse(localStorage.getItem('mp'));
            // if(!mp){
            //     this.getcode()
            // }
            let _this = this;
            //监听滚动，确定搜索框动效的条件达成
            window.addEventListener('scroll',function(){
                if(window.scrollY > 337){
                    _this.isSearchPannelStyle = true
                }else{
                    _this.isSearchPannelStyle = false
                }
            },{passive:true});
            GetIndexBanner().then(respones=>{
                let myguides = respones;
                //添加高亮条件
                myguides.forEach(el=>{
                    el.showme = false
                });
                this.swipersData = respones
            })

            //学术头条
            //进来页面请求
            RequestGet({url:'index/getnewlist'}).then(res=>{
                let list = res.data.data.map(e=>{
                    let a= {}
                    a.description1 = e[0].description
                    a.description2 = e[1].description
                    a.type = e[0].type
                    a.type_text = e[0].type_text
                    return a
                })
                console.log(list)
                this.newlist = list
            })
        },
        computed:{
            Mtitle: function(){
                if(this.getMeetingData.meetingdate.dateStart||
                    this.getMeetingData.meetingdate.daterange||
                    this.getMeetingData.dateDeadline.dateStart||
                    this.getMeetingData.dateDeadline.daterange||
                    (this.getMeetingData.choseTerritory !== '不限')||
                    (this.getMeetingData.choseType !== '不限')||
                    (this.getMeetingData.choseLocale !== '不限')
                ){
                    return true
                }else{
                    return false
                }
            },

            meetingdate_keyword:function(){
                let md = this.getMeetingData.meetingdate;
                if(md.daterange){
                    return `会议日期：${(new Date()).getFullYear()}年${(new Date()).getMonth()+1}月${(new Date()).getDate()}日-${(new Date(md.daterange*1000)).getFullYear()}年${(new Date(md.daterange*1000)).getMonth()+1}月${(new Date(md.daterange*1000)).getDate()}日`
                }else if(!md.daterange && md.dateStart){
                    return `会议日期：${(new Date(md.dateStart*1000)).getFullYear()}年${(new Date(md.dateStart*1000)).getMonth()+1}月${(new Date(md.dateStart*1000)).getDate()}日-${(new Date(md.dateEnd*1000)).getFullYear()}年${(new Date(md.dateEnd*1000)).getMonth()+1}月${(new Date(md.dateEnd*1000)).getDate()}日`
                }else{
                    return false
                }
            },
            dateDeadline_keyword:function(){
                let md = this.getMeetingData.dateDeadline;
                if(md.daterange){
                    return `截稿日期：${(new Date()).getFullYear()}年${(new Date()).getMonth()+1}月${(new Date()).getDate()}日-${(new Date(md.daterange*1000)).getFullYear()}年${(new Date(md.daterange*1000)).getMonth()+1}月${(new Date(md.daterange*1000)).getDate()}日`
                }else if(!md.daterange && md.dateStart){
                    return `截稿日期：${(new Date(md.dateStart*1000)).getFullYear()}年${(new Date(md.dateStart*1000)).getMonth()+1}月${(new Date(md.dateStart*1000)).getDate()}日-${(new Date(md.dateEnd*1000)).getFullYear()}年${(new Date(md.dateEnd*1000)).getMonth()+1}月${(new Date(md.dateEnd*1000)).getDate()}日`
                }else{
                    return false
                }
            }
        },
        filters:{
            //轮播标题字数处理
            formatTitle: function(value){
                if(/\w/g.test(value)){
                    let engStrLen = value.match(/\w/g).length;
                    let chnStrlen = value.length - value.match(/\w/g).length;
                    let realStrLen = engStrLen + Math.floor(chnStrlen * 1.8);
                    if(realStrLen > 58){
                        let StrLen = 0;
                        let i=0;
                        while(StrLen < 55){
                            i++
                            if(!/\w/g.test(value[i])){
                                StrLen += 1.8
                            }else{
                                StrLen ++
                            }
                        }
                        return value.substr(0,i)+'...'
                    }else{
                        return value
                    }
                }else{
                    if(value.length > 32){
                        return value.substr(0,29)+'...'
                    }else{
                        return value
                    }
                }
            }
        },
        data: function(){
            return{
                // appid: 'wx261c6cc183219826',
                slide:'',
                isloadEnd: false,
                loadinglist:false,
                getMeetingData: {
                    lp:1,
                    choseTerritory: "不限",
                    choseType: "不限",
                    choseLocale: '不限',
                    meetingdate: {
                        dateStart: null,
                        dateEnd: null,
                        daterange: null
                    },
                    dateDeadline: {
                        dateStart: null,
                        dateEnd: null,
                        daterange: null
                    }
                },
                throttle: null,
                isSearchStyle: false, //闪烁样式判断条件
                isSearchPannelStyle: false, //滚动页面，搜索框样式改变判断条件
                switchFillter: false, //筛选功能的侧边栏显示和隐藏判断条件
                switchSearch:false, //搜索页面的显示和隐藏判断条件
                time: 5000, //vant轮播组件的切换定时器
                swiperIndex:null,
                swipersData:[],
                MeetingData: [],
                isStop_loadmore: false,
                newlist:[
                    {programa:'notice',title:'公告',content:'人工智能与42：从AlphaFold谈起'},
                    {programa:'choiceness',title:'学术干货',content:'乙烯信号简史 | “总司令”EIN3'},
                    {programa:'advisory',title:'学术咨询',content:'喝酒划拳中的数学'},
                ]
            }
        },
        components:{
            Sidebar
        },
        // 数据结束
        methods: {
            //vant轮播组件方法，切换时将自己的index传给guidesOperate方法，然后再传入switchGuide方法
            // getopenid(){
            //     // $.ajax({
            //     //   url:'http://test.keoconf.com/mobile/user/getopenid?code='+this.code,
            //     // }).then(()=>{
            //     //   alert(123)
            //     // }).catch(err=>{
            //     //   alert(JSON.stringify(err))
            //     // })
            //     Axios({
            //         method: 'post',
            //         url: 'https://www.aisholar.com/mobile/user/getopenid',
            //         data:{ code:this.code } //向服务端提供参数
            //     }).then((respones)=>{
            //         console.log(respones)
            //         if(respones.data.code == 1){
            //             if(respones.data.data.userData){
            //                 localStorage.setItem('mp',JSON.stringify(respones.data.data.mp))
            //                 localStorage.setItem('login',JSON.stringify(respones.data.data.userData))
            //             }
            //         }
            //     })
            // },
            // getcode () { // 非静默授权，第一次有弹框
            //     if(this.$route.query.code){
            //         this.code = this.$route.query.code;
            //     }
            //     if (this.code == null || this.code === '') {
            //         window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appid + '&redirect_uri=http%3a%2f%2fm.keoconf.com&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
            //     } else {
            //
            //         this.getopenid() //把code传给后台获取用户信息
            //     }
            // },
            onChange(index){
                this.swiperIndex = index;
                this.guidesOperate(this.swiperIndex)
            },
            //guide参数是缩略图当前的索引index，这里是缩略图的点击事件
            switchGuide(guide){
                let _this = this;
                let itemIndex = this.swipersData.indexOf(guide);
                if(itemIndex === this.swiperIndex){
                    return false;
                }
                this.swiperIndex = itemIndex;
                this.guidesOperate(this.swiperIndex);  //缩略图高亮切换
                this.$refs.myswipe.swipeTo(this.swiperIndex) //轮播跳转到索引指定index
            },
            //缩略图高亮
            guidesOperate(id){
                this.swipersData.forEach(item => {
                    item.showme = false
                });
                this.swipersData[id].showme = true
            },
            // 点击搜索栏，搜索框会闪烁一下，然后召唤搜索页面
            blink(){
                let _this =this;
                this.isSearchStyle = !this.isSearchStyle;
                let t;
                clearTimeout(t);
                t = setTimeout(function(){
                    _this.isSearchStyle = !_this.isSearchStyle;
                },200)
            },
            // 执行关闭侧边筛选栏
            SwitchInFillter(){
                this.switchFillter = !this.switchFillter
            },
            // 筛选功能点击确定后搜索
            fillterSearch(obj){
                // 先关闭侧边栏
                this.SwitchInFillter();
                this.loadinglist = true;
                // 发送请求搜索
                if(obj){
                    obj.lp = 1;
                    let _this =this;
                    GetFillter(obj)
                        .then(res=>{
                            this.isloadEnd = false;
                            this.isStop_loadmore = true;
                            this.MeetingData = res;
                            let timer = setTimeout(function () {
                                _this.loadinglist = !_this.loadinglist;
                            },300);
                        })
                        .then(()=>{
                            obj.lp++
                            this.isStop_loadmore = false;
                            this.getMeetingData = obj
                        })
                        .catch(err=>{
                            if(err === '0'){
                                this.loadinglist = !this.loadinglist
                                this.isStop_loadmore = false
                            }
                        })
                }
            },
            // 下拉无限的组件自带
            loadMore() {
                let _this = this;
                _this.loading = true;
                if(_this.throttle){
                    clearTimeout(_this.throttle)
                }
                if(this.isStop_loadmore) return;
                _this.throttle = setTimeout(()=>{
                    this.isStop_loadmore = true
                    GetMeetingList(_this.getMeetingData)
                        .then(
                            res=>{
                                _this.MeetingData = _this.MeetingData.concat(res);
                                _this.throttle = null;
                                _this.loading = false;
                                _this.getMeetingData.lp++
                                this.isStop_loadmore = false
                            },
                            rej=>{
                                _this.isloadEnd = true;
                            }
                        )
                },300)
            }
        },
        watch:{
            //打开侧边栏暂停轮播
            switchFillter: function(val,oldval){
                if(val === true){
                    this.time = 0
                    document.body.style.overflow = 'hidden'
                }else{
                    this.time = 5000
                    document.body.style.overflow = 'auto'
                }
            },
            switchSearch:function(val,oldval){
                if(val === true){
                    this.time = 0
                }else{
                    this.time = 5000
                }
            },
            '$route' (to, from) {
                // this.code = to.query.code;
                if(to.path==="/home/search"){
                    this.slide = 'slide-left'

                }else{
                    this.slide = ''

                }
            }
        }
    }
</script>
<style>
    .picker-item{font-size: .4rem;}
    .picker-items{padding: 0 1.3rem;}
    .picker-toolbar{height: .8rem;}
    .mint-datetime-action{font-size: .4rem;line-height: .8rem;}
    .mint-spinner-snake{margin: 10% auto;}
</style>


